<template>

  <div>

    <el-tabs v-model="listQuery.params.learnState" @tab-click="tabClick">
      <el-tab-pane name="0" label="全部课程" />
      <el-tab-pane name="1" label="未学习" />
      <el-tab-pane name="2" label="学习中" />
      <el-tab-pane name="3" label="已学完" />
    </el-tabs>

    <web-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template #filter-content>

        <dic-catalog-tree v-model="listQuery.params.catId" dic-code="course_catalog" placeholder="课程分类" width="200" class="filter-item" />
        <dic-list-select v-model="listQuery.params.isMust" dic-code="course_need" title="学习类型" />

        <el-input
          v-model="listQuery.params.title"
          class="filter-item"
          placeholder="搜索课程名称"
          prefix-icon="el-icon-search"
          size="small"
          style="width: 200px; margin-left: 10px"
        />

      </template>

      <template #data-columns>

        <el-table-column
          label=" "
          prop="title"
          width="150px"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            <el-image v-if="scope.row.cover!=null && scope.row.cover!=''" :src="scope.row.cover" fit="fill" class="cover" />
            <el-image v-else :src="require('@/assets/web/images/course_default.jpg')" fit="fill" class="cover" />
          </template>

        </el-table-column>

        <el-table-column
          label="课程名称"
          prop="title"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" @click="handelView" />
            <el-tag v-if="scope.row.liveCount > 0" style="margin-left: 5px" type="danger" size="mini">直播</el-tag>
          </template>

        </el-table-column>

        <el-table-column
          label="课程介绍"
          prop="contentText"
          show-overflow-tooltip
        />

        <el-table-column
          label="分类"
          prop="catId_dictText"
          align="center"
          width="150px"
        />

        <el-table-column
          label="状态"
          align="center"
          width="100px"
        >

          <template v-slot="scope">
            <span v-if="scope.row.state == null">未学习</span>
            <span v-else-if="scope.row.state == 0">学习中</span>
            <span v-else-if="scope.row.state == 1">已学完</span>
            <span v-else> -- </span>
          </template>

        </el-table-column>

        <el-table-column
          label="最近学习"
          align="center"
          width="180px"
          prop="updateTime"
        />
      </template>
    </web-table>

  </div>

</template>

<script>

import DicListSelect from '@/components/DicListSelect'
import DetailLink from '@/components/DetailLink'
import WebTable from '@/components/WebTable'
import DicCatalogTree from '../../../components/DicTreeSelect'
import { mapGetters } from 'vuex'

export default {
  name: 'UserCourseList',
  components: { DicCatalogTree, WebTable, DetailLink, DicListSelect },
  props: {
    onlyLearn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          onlyLearn: this.onlyLearn,
          learnState: '0'
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/course/course/user-paging'
      }
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  created() {

  },
  methods: {

    tabClick(tab) {
      this.listQuery.params.learnState = tab.name
      this.$refs.pagingTable.getList()
    },

    // 课程详情
    handelView(courseId) {
      this.$router.push({ name: 'CourseView', params: { courseId: courseId }})
    }

  }
}
</script>

<style scoped>

/deep/
.el-card__body{
  padding: 0px
}

.cover{
  height: 60px;
  width: 120px
}

</style>

